<template>
    <div>
        <el-upload action=""
                   list-type="picture-card"
                   :auto-upload="false"
                   :on-change="handleOnChange"
                   :data="resData"
                   ref="pictureUpload"
                   :limit="1">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" :modal="false">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <el-divider></el-divider>
        <el-row>
            <el-form :model="resData" :rules="rules" ref="resData" label-width="100px">
                <el-form-item label="商品名称" prop="name">
                    <el-input v-model="resData.name"></el-input>
                </el-form-item>
                <el-form-item style="float: right">
                    <el-button type="success" @click="doFunc"> 确 认 </el-button>
                    <el-button @click="cancelFunc"> 取 消 </el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "component",
        props:['isAdd'],
        data(){
            return{
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                resData: {
                    // 用户要在确定新建后要传给后台的对应名称
                    name: '',
                    // 用户要传给后台的商品的图片
                    file: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                    ],
                }
            }
        },
        methods:{
            handleOnChange(file, fileList){
                // alert( file.toString());
                this.resData.file = fileList[0].raw;
            },
            // 上传缩略图中的移除表示符
            handleRemove(file) {
               this.$refs.pictureUpload.handleRemove(file)
            },
            // 上传缩略图中的缩略表示
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            clear(win){
                win.$refs.pictureUpload.clearFiles();
                win.resData = {
                    // 用户要在确定新建后要传给后台的对应名称
                    name: '',
                        // 用户要传给后台的商品的图片
                        file: ''
                };
            },
            // 当点击了下方的确认按钮后，执行下面的功能
            doFunc(){
                const formData = new FormData();
                formData.append("name", this.resData.name);
                formData.append("file", this.resData.file);
                let win = this;
                this.$http.post("/api/commodity/add",
                    formData, {headers:{'Content-Type': 'multipart/form-data'}}).then(function(response){
                    if(response.data){
                        win.$message.success("操作成功");
                        win.clear(win);
                    } else {
                        win.$message.error("遇到错误，操作失败");
                        win.clear(win);
                    }
                    win.$emit('watchingCloseVisble',false);
                });
            },
            cancelFunc(){
                // 取消按钮对应的功能
                this.clear(this);
                // 关闭视图界面
                this.$emit('watchingCloseVisble',false);
            }
        }
    }
</script>

<style scoped>

</style>
